<include file="Public:iframe_head" />

	<div class="main-center">
		<div class="user-left-menu">

		<div class="user-left-head">	
			<div class="user-head-image" >
				<img src="__PUBLIC__/img/Fsl8JQV5Y59_Cat6DgxgamCNEoO-.png">
			</div>
			<p class="user-head-name">{$userInfo.name}</p>

			<span class="user-head-day">
				<i class="fa fa-mars"></i>
				<span class="user-head-costell">{$userInfo.constell}</span>	
			</span>
			<span class="user-head-address">
				<i class="fa fa-location-arrow"></i>
				<span class="user-head-costell">{$userInfo.city}</span>	
			</span>
			<p>&nbsp</p>
		</div>

		<ul class="menu-list">
			<li><a href="__URL__/index">我的动态</a></li>
			<li><a href="__URL__/edit">个人信息</a></li>
			<li><a href="__URL__/mycollect">我的收藏</a></li>
		</ul>
	</div>

	<div class="user-left-edit">
		
		<h3>个人资料</h3>
		<hr>
		<form style="margin-bottom: 100px;" class="user-left-forms" role="form" action="edit" enctype="multipart/form-data" method="POST">
			
			<div class="form-group">
				<label>头像上传</label>
				<div class="add-files">
					<input class="form-image-upload" style="z-index: 10"  type="file" name="file">
					<i class="fa fa-upload fa-2x"></i>
					<span  class="file-docu"></span>
					<img class="form-image-show"  src="">
				</div>
				<p style="color:#6ed56c;font-size: 12px;margin-top: 5px; ">上传文件格式仅限：jpg,png</p>

			</div>

			<div class="form-group">
				<label>用户名</label>
				<input style="width: 40%;" class="form-control" type="text" name="userName">
			</div>

			<div class="form-group">
				<label>性别</label>
				 &nbsp;&nbsp;&nbsp;<input value="1" type="radio" name="sex">&nbsp;男
				 &nbsp;&nbsp;&nbsp;&nbsp;<input value="2" type="radio" name="sex">&nbsp;女
			</div>

			<div class="form-group">
				<label>城市</label>
				<input style="width: 40%;" class="form-control" type="text" name="city">
			</div>

			<div class="form-group">
				<label>星座</label>
				<select name="constell" class="constell-select" style="width: 30%;outline: none;">
					<option disabled selected = "selected">请选择</option>
					<option v-for="item in constell">{{item}}</option>
				</select>
			</div>

			<div class="form-group">
				<label>个人简介</label>
				<textarea style="display: block;height: 100px;width: 40%;outline: none;resize: none;"  name="userInstro"></textarea>
			</div>

			<div class="form-group">
				<input id="form-submit"  class="btn btn-success" type="button" name="submitIn" value=" 提交 ">
			</div>
			
		</form>
	</div>
   
 </div>
</main>

<script type="text/javascript">
	
	$(".menu-list li").each(function() {
		var index = {$selectIndex};
		if (index == $(this).index()) {
			$(this).addClass("icon-current");
		}
	});
	if ("{$userInfo.head_pic}") {
		var newUrl = "__PUBLIC__/"+"{$userInfo.head_pic}";
		$(".user-head-image img").attr("src",newUrl);
	}

	

	var constell = ["白羊座","金牛座","双子座","巨蟹座","狮子座","处女座","天秤座","天蝎座","射手座","摩羯座","水瓶座","双鱼座"];
	var vm = new Vue({
		el: "#app",
		data:{
			constell:constell,
		}
	})
	var uerInfo = {$userInfo};
	if (uerInfo) {
		if ("{$userInfo.name}") {
			$("input[name='userName']").val("{$userInfo.name}");
		}
		if ("{$userInfo.sex}") {
			var sex = "{$userInfo.sex}";
			$(":radio[name='sex'][value='" + sex + "']").prop("checked", "checked");
		}
		if ("{$userInfo.constell}") {
		  var con = constell.indexOf("{$userInfo.constell}"); 
		  $(".constell-select").get(0).selectedIndex = con+1;
		}
		if ("{$userInfo.city}") {
		  	$("input[name='city']").val("{$userInfo.city}");
		}
		if ("{$userInfo.introduction}") {
		  	$("textarea[name='userInstro']").val("{$userInfo.introduction}");
		}
		if ("{$userInfo.head_pic}") {
			var newUrl = "__PUBLIC__/"+"{$userInfo.head_pic}";
			$(".form-image-show").css("display","block");
		  	$(".form-image-show").attr("src",newUrl);
		}

	}

	$("#form-submit").click(function(){

		$(".user-left-forms").submit();

	})

	$(".form-image-upload").change(function(e) {
			var fileName = this.value.toLowerCase().split('.').splice(-1);
			if (fileName == "png" || fileName == "jpg") {
				$(".file-docu").text($(this).val());
				$(".form-image-show").css("display","block");
				var fr = new FileReader();
				var imgObj = this.files[0];
				fr.readAsDataURL(imgObj);
				
				fr.onload = function(e) {
					var newUrl = this.result;
					$(".form-image-show").attr("src",newUrl);
				}
			}else {
				$(".form-image-show").css("display","none");
				$(this).val("");
				$('.file-docu').text("文件格式不对");
				setTimeout("$('.file-docu').text('');",2000);
			}			
	});


</script>



<script src="__PUBLIC__/js/main.js" type="text/javascript"></script>

</body>
</html>
